<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>恶意URL检测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
            margin-bottom: 20px;
        }
        
        .header-features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        
        .feature-tag {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.8em;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }
        
        .input-group input, .input-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .input-group input:focus, .input-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s ease;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        }
        
        .btn-info {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        
        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .batch-stats {
            margin: 20px 0;
        }
        
        .stats-card {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .stat-number {
            display: block;
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #6b7280;
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .system-overview {
            margin: 20px 0;
        }
        
        .overview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .overview-card {
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .overview-card h3 {
            color: #667eea;
            margin-bottom: 15px;
            font-size: 1.2em;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 8px;
        }
        
        .overview-content p {
            margin-bottom: 8px;
            color: #475569;
        }
        
        .overview-content strong {
            color: #374151;
        }
        
        .result {
            margin-top: 20px;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        
        .result.success {
            background: #f0f9ff;
            border-left-color: #10b981;
        }
        
        .result.error {
            background: #fef2f2;
            border-left-color: #ef4444;
        }
        
        .result.warning {
            background: #fffbeb;
            border-left-color: #f59e0b;
        }
        
        .result h3 {
            margin-bottom: 15px;
            color: #333;
        }
        
        .result p {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .feature-item {
            background: #f8fafc;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }
        
        .feature-name {
            font-weight: 600;
            color: #374151;
            margin-bottom: 5px;
        }
        
        .feature-value {
            color: #6b7280;
            font-family: monospace;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
        }
        
        .status-safe {
            background: #d1fae5;
            color: #065f46;
        }
        
        .status-malicious {
            background: #fee2e2;
            color: #991b1b;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .tabs {
            display: flex;
            border-bottom: 2px solid #e1e5e9;
            margin-bottom: 30px;
        }
        
        .tab {
            padding: 15px 25px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            color: #666;
        }
        
        .tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .confidence-bar {
            width: 100%;
            height: 20px;
            background: #e5e7eb;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #059669);
            transition: width 0.3s ease;
        }
        
        .confidence-fill.high {
            background: linear-gradient(90deg, #ef4444, #dc2626);
        }
        
        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .tech-card {
            background: #f8fafc;
            padding: 25px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .tech-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .tech-card h3 {
            color: #667eea;
            margin-bottom: 15px;
            font-size: 1.3em;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 10px;
        }
        
        .tech-card ul {
            list-style: none;
            padding: 0;
        }
        
        .tech-card li {
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
            color: #475569;
            position: relative;
            padding-left: 20px;
        }
        
        .tech-card li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #10b981;
            font-weight: bold;
        }
        
        .tech-card li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔒 恶意URL检测系统</h1>
            <p>基于Python的机器学习智能URL安全检测平台</p>
            <div class="header-features">
                <span class="feature-tag">🔍 21种特征提取</span>
                <span class="feature-tag">🤖 机器学习算法</span>
                <span class="feature-tag">⚡ 实时检测</span>
                <span class="feature-tag">📊 可视化分析</span>
            </div>
        </div>
        
        <div class="content">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('single')">单个检测</div>
                <div class="tab" onclick="switchTab('batch')">批量检测</div>
                <div class="tab" onclick="switchTab('features')">特征分析</div>
                <div class="tab" onclick="switchTab('tech')">技术特性</div>
                <div class="tab" onclick="switchTab('stats')">系统状态</div>
            </div>
            
            <!-- 单个检测标签页 -->
            <div id="single" class="tab-content active">
                <div class="section">
                    <h2>🔍 单个URL检测</h2>
                    <div class="input-group">
                        <label for="singleUrl">输入要检测的URL:</label>
                        <input type="url" id="singleUrl" placeholder="https://example.com" />
                    </div>
                    <div class="button-group">
                        <button class="btn" onclick="detectSingleUrl()">🔍 开始检测</button>
                        <button class="btn btn-secondary" onclick="clearSingleResult()">🗑️ 清空结果</button>
                        <button class="btn btn-info" onclick="showExampleUrls()">📋 示例URL</button>
                    </div>
                    
                    <div class="loading" id="singleLoading">
                        <div class="spinner"></div>
                        <p>正在分析URL特征...</p>
                    </div>
                    
                    <div id="singleResult"></div>
                </div>
            </div>
            
            <!-- 批量检测标签页 -->
            <div id="batch" class="tab-content">
                <div class="section">
                    <h2>📋 批量URL检测</h2>
                    <div class="input-group">
                        <label for="batchUrls">输入多个URL (每行一个):</label>
                        <textarea id="batchUrls" rows="8" placeholder="https://example1.com&#10;https://example2.com&#10;https://example3.com"></textarea>
                    </div>
                    <div class="button-group">
                        <button class="btn" onclick="detectBatchUrls()">🔍 开始批量检测</button>
                        <button class="btn btn-secondary" onclick="clearBatchResult()">🗑️ 清空结果</button>
                        <button class="btn btn-info" onclick="loadSampleUrls()">📋 加载示例</button>
                        <button class="btn btn-success" onclick="exportResults()">📥 导出结果</button>
                    </div>
                    
                    <div class="batch-stats" id="batchStats" style="display: none;">
                        <div class="stats-card">
                            <div class="stat-item">
                                <span class="stat-number" id="totalUrls">0</span>
                                <span class="stat-label">总URL数</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="safeUrls">0</span>
                                <span class="stat-label">安全URL</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="maliciousUrls">0</span>
                                <span class="stat-label">恶意URL</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="loading" id="batchLoading">
                        <div class="spinner"></div>
                        <p>正在批量分析URL特征...</p>
                    </div>
                    
                    <div id="batchResult"></div>
                </div>
            </div>
            
            <!-- 特征分析标签页 -->
            <div id="features" class="tab-content">
                <div class="section">
                    <h2>🔬 URL特征分析</h2>
                    <div class="input-group">
                        <label for="featureUrl">输入要分析的URL:</label>
                        <input type="url" id="featureUrl" placeholder="https://example.com" />
                    </div>
                    <button class="btn" onclick="extractFeatures()">提取特征</button>
                    
                    <div class="loading" id="featureLoading">
                        <div class="spinner"></div>
                        <p>正在提取特征...</p>
                    </div>
                    
                    <div id="featureResult"></div>
                </div>
            </div>
            
            <!-- 系统状态标签页 -->
            <div id="stats" class="tab-content">
                <div class="section">
                    <h2>📊 系统状态</h2>
                    <div class="button-group">
                        <button class="btn" onclick="getSystemStats()">🔄 刷新状态</button>
                        <button class="btn btn-info" onclick="testSystemHealth()">🏥 健康检查</button>
                        <button class="btn btn-success" onclick="showSystemInfo()">ℹ️ 系统信息</button>
                    </div>
                    
                    <div class="system-overview" id="systemOverview" style="display: none;">
                        <div class="overview-grid">
                            <div class="overview-card">
                                <h3>🔒 安全状态</h3>
                                <div class="overview-content">
                                    <p><strong>模型状态:</strong> <span id="modelStatus">检查中...</span></p>
                                    <p><strong>API状态:</strong> <span id="apiStatus">检查中...</span></p>
                                    <p><strong>系统运行时间:</strong> <span id="uptime">计算中...</span></p>
                                </div>
                            </div>
                            <div class="overview-card">
                                <h3>📈 性能指标</h3>
                                <div class="overview-content">
                                    <p><strong>特征数量:</strong> <span id="featureCount">-</span></p>
                                    <p><strong>检测准确率:</strong> <span id="accuracy">-</span></p>
                                    <p><strong>响应时间:</strong> <span id="responseTime">-</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="statsResult"></div>
                </div>
            </div>
            
            <!-- 技术特性标签页 -->
            <div id="tech" class="tab-content">
                <div class="section">
                    <h2>🚀 技术特性</h2>
                    <div class="tech-grid">
                        <div class="tech-card">
                            <h3>🔍 特征工程</h3>
                            <ul>
                                <li>URL长度分析</li>
                                <li>域名特征提取</li>
                                <li>字符统计特征</li>
                                <li>可疑模式识别</li>
                                <li>SSL证书检测</li>
                                <li>重定向分析</li>
                            </ul>
                        </div>
                        <div class="tech-card">
                            <h3>🤖 机器学习</h3>
                            <ul>
                                <li>随机森林算法</li>
                                <li>梯度提升算法</li>
                                <li>逻辑回归算法</li>
                                <li>支持向量机</li>
                                <li>超参数调优</li>
                                <li>交叉验证</li>
                            </ul>
                        </div>
                        <div class="tech-card">
                            <h3>⚡ 系统架构</h3>
                            <ul>
                                <li>Python Flask框架</li>
                                <li>RESTful API设计</li>
                                <li>实时检测引擎</li>
                                <li>批量处理能力</li>
                                <li>可视化界面</li>
                                <li>性能监控</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

    </div>

    <script>
        const API_BASE = 'http://localhost:5000';
        
        function switchTab(tabName) {
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 移除所有标签页的active类
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签页内容
            document.getElementById(tabName).classList.add('active');
            
            // 添加active类到选中的标签
            event.target.classList.add('active');
        }
        
        async function detectSingleUrl() {
            const url = document.getElementById('singleUrl').value.trim();
            if (!url) {
                alert('请输入要检测的URL');
                return;
            }
            
            showLoading('single');
            hideResult('single');
            
            try {
                const response = await fetch(`${API_BASE}/detect`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url: url })
                });
                
                const data = await response.json();
                hideLoading('single');
                
                if (data.status === 'success') {
                    displaySingleResult(data.result);
                } else {
                    displayError('single', data.error);
                }
            } catch (error) {
                hideLoading('single');
                displayError('single', '网络错误: ' + error.message);
            }
        }
        
        async function detectBatchUrls() {
            const urlsText = document.getElementById('batchUrls').value.trim();
            if (!urlsText) {
                alert('请输入要检测的URL');
                return;
            }
            
            const urls = urlsText.split('\n').filter(url => url.trim());
            if (urls.length === 0) {
                alert('请输入有效的URL');
                return;
            }
            
            showLoading('batch');
            hideResult('batch');
            
            try {
                const response = await fetch(`${API_BASE}/batch_detect`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ urls: urls })
                });
                
                const data = await response.json();
                hideLoading('batch');
                
                if (data.status === 'success') {
                    displayBatchResult(data.results);
                } else {
                    displayError('batch', data.error);
                }
            } catch (error) {
                hideLoading('batch');
                displayError('batch', '网络错误: ' + error.message);
            }
        }
        
        async function extractFeatures() {
            const url = document.getElementById('featureUrl').value.trim();
            if (!url) {
                alert('请输入要分析的URL');
                return;
            }
            
            showLoading('feature');
            hideResult('feature');
            
            try {
                const response = await fetch(`${API_BASE}/features`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url: url })
                });
                
                const data = await response.json();
                hideLoading('feature');
                
                if (data.status === 'success') {
                    displayFeatureResult(data.features);
                } else {
                    displayError('feature', data.error);
                }
            } catch (error) {
                hideLoading('feature');
                displayError('feature', '网络错误: ' + error.message);
            }
        }
        
        async function getSystemStats() {
            try {
                const response = await fetch(`${API_BASE}/stats`);
                const data = await response.json();
                
                if (data.status === 'success') {
                    displayStatsResult(data);
                } else {
                    displayError('stats', data.error);
                }
            } catch (error) {
                displayError('stats', '网络错误: ' + error.message);
            }
        }
        
        function displaySingleResult(result) {
            const resultDiv = document.getElementById('singleResult');
            const statusClass = result.is_malicious ? 'error' : 'success';
            const statusText = result.is_malicious ? '恶意' : '安全';
            const statusBadgeClass = result.is_malicious ? 'status-malicious' : 'status-safe';
            const confidenceClass = result.confidence > 0.7 ? 'high' : '';
            
            resultDiv.innerHTML = `
                <div class="result ${statusClass}">
                    <h3>检测结果</h3>
                    <p><strong>URL:</strong> ${result.url}</p>
                    <p><strong>状态:</strong> <span class="status-badge ${statusBadgeClass}">${statusText}</span></p>
                    <p><strong>置信度:</strong> ${(result.confidence * 100).toFixed(2)}%</p>
                    <div class="confidence-bar">
                        <div class="confidence-fill ${confidenceClass}" style="width: ${result.confidence * 100}%"></div>
                    </div>
                    <p><strong>检测时间:</strong> ${new Date(result.timestamp).toLocaleString()}</p>
                </div>
            `;
        }
        
        function displayBatchResult(results) {
            const resultDiv = document.getElementById('batchResult');
            let html = '<div class="result success"><h3>批量检测结果</h3>';
            
            results.forEach((result, index) => {
                if (result.error) {
                    html += `<p><strong>URL ${index + 1}:</strong> 错误 - ${result.error}</p>`;
                } else {
                    const statusText = result.is_malicious ? '恶意' : '安全';
                    const statusBadgeClass = result.is_malicious ? 'status-malicious' : 'status-safe';
                    html += `
                        <p><strong>URL ${index + 1}:</strong> ${result.url}</p>
                        <p>状态: <span class="status-badge ${statusBadgeClass}">${statusText}</span> 
                        (置信度: ${(result.confidence * 100).toFixed(2)}%)</p>
                        <hr style="margin: 10px 0; border: none; border-top: 1px solid #e1e5e9;">
                    `;
                }
            });
            
            html += '</div>';
            resultDiv.innerHTML = html;
        }
        
        function displayFeatureResult(features) {
            const resultDiv = document.getElementById('featureResult');
            let html = '<div class="result success"><h3>特征分析结果</h3><div class="features-grid">';
            
            for (const [name, value] of Object.entries(features)) {
                html += `
                    <div class="feature-item">
                        <div class="feature-name">${name}</div>
                        <div class="feature-value">${value}</div>
                    </div>
                `;
            }
            
            html += '</div></div>';
            resultDiv.innerHTML = html;
        }
        
        function displayStatsResult(stats) {
            const resultDiv = document.getElementById('statsResult');
            resultDiv.innerHTML = `
                <div class="result success">
                    <h3>系统状态信息</h3>
                    <p><strong>模型状态:</strong> ${stats.model_loaded ? '已加载' : '未加载'}</p>
                    <p><strong>特征数量:</strong> ${stats.feature_count}</p>
                    <p><strong>更新时间:</strong> ${new Date(stats.timestamp).toLocaleString()}</p>
                    <h4>支持的特征:</h4>
                    <div class="features-grid">
                        ${stats.features.map(feature => `
                            <div class="feature-item">
                                <div class="feature-name">${feature}</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        }
        
        function displayError(type, message) {
            const resultDiv = document.getElementById(type + 'Result');
            resultDiv.innerHTML = `
                <div class="result error">
                    <h3>错误</h3>
                    <p>${message}</p>
                </div>
            `;
        }
        
        function showLoading(type) {
            document.getElementById(type + 'Loading').style.display = 'block';
        }
        
        function hideLoading(type) {
            document.getElementById(type + 'Loading').style.display = 'none';
        }
        
        function hideResult(type) {
            document.getElementById(type + 'Result').innerHTML = '';
        }
        
        // 新增功能函数
        function clearSingleResult() {
            document.getElementById('singleResult').innerHTML = '';
            document.getElementById('singleUrl').value = '';
        }
        
        function clearBatchResult() {
            document.getElementById('batchResult').innerHTML = '';
            document.getElementById('batchUrls').value = '';
            document.getElementById('batchStats').style.display = 'none';
        }
        
        function showExampleUrls() {
            const examples = [
                'https://www.google.com',
                'https://www.microsoft.com',
                'http://malicious-site.tk/login',
                'https://bit.ly/suspicious-link',
                'http://192.168.1.1/admin'
            ];
            document.getElementById('singleUrl').value = examples[Math.floor(Math.random() * examples.length)];
        }
        
        function loadSampleUrls() {
            const sampleUrls = [
                'https://www.google.com',
                'https://www.microsoft.com',
                'https://www.apple.com',
                'http://malicious-site.tk/login',
                'https://bit.ly/suspicious-link',
                'http://192.168.1.1/admin',
                'https://www.github.com',
                'https://www.stackoverflow.com'
            ];
            document.getElementById('batchUrls').value = sampleUrls.join('\n');
        }
        
        function exportResults() {
            const resultDiv = document.getElementById('batchResult');
            if (!resultDiv.innerHTML) {
                alert('没有可导出的结果');
                return;
            }
            
            // 创建CSV内容
            let csvContent = 'URL,状态,置信度,检测时间\n';
            const results = resultDiv.querySelectorAll('.result-item');
            
            results.forEach(result => {
                const url = result.querySelector('.url-text')?.textContent || '';
                const status = result.querySelector('.status-badge')?.textContent || '';
                const confidence = result.querySelector('.confidence-text')?.textContent || '';
                const time = new Date().toLocaleString();
                csvContent += `"${url}","${status}","${confidence}","${time}"\n`;
            });
            
            // 下载CSV文件
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', 'url_detection_results.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        
        // 更新批量检测结果显示函数
        function displayBatchResult(results) {
            const resultDiv = document.getElementById('batchResult');
            const statsDiv = document.getElementById('batchStats');
            
            let safeCount = 0;
            let maliciousCount = 0;
            
            let html = '<div class="result success"><h3>📊 批量检测结果</h3>';
            
            results.forEach((result, index) => {
                if (result.error) {
                    html += `<p><strong>URL ${index + 1}:</strong> 错误 - ${result.error}</p>`;
                } else {
                    const statusText = result.is_malicious ? '恶意' : '安全';
                    const statusBadgeClass = result.is_malicious ? 'status-malicious' : 'status-safe';
                    
                    if (result.is_malicious) {
                        maliciousCount++;
                    } else {
                        safeCount++;
                    }
                    
                    html += `
                        <div class="result-item">
                            <p><strong>URL ${index + 1}:</strong> <span class="url-text">${result.url}</span></p>
                            <p>状态: <span class="status-badge ${statusBadgeClass}">${statusText}</span> 
                            (置信度: <span class="confidence-text">${(result.confidence * 100).toFixed(2)}%</span>)</p>
                        </div>
                        <hr style="margin: 15px 0; border: none; border-top: 1px solid #e1e5e9;">
                    `;
                }
            });
            
            html += '</div>';
            resultDiv.innerHTML = html;
            
            // 更新统计信息
            document.getElementById('totalUrls').textContent = results.length;
            document.getElementById('safeUrls').textContent = safeCount;
            document.getElementById('maliciousUrls').textContent = maliciousCount;
            statsDiv.style.display = 'block';
        }
        
        // 系统状态相关函数
        function testSystemHealth() {
            fetch(`${API_BASE}/health`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'healthy') {
                        document.getElementById('apiStatus').textContent = '✅ 正常';
                        document.getElementById('apiStatus').style.color = '#10b981';
                    } else {
                        document.getElementById('apiStatus').textContent = '❌ 异常';
                        document.getElementById('apiStatus').style.color = '#ef4444';
                    }
                })
                .catch(error => {
                    document.getElementById('apiStatus').textContent = '❌ 连接失败';
                    document.getElementById('apiStatus').style.color = '#ef4444';
                });
        }
        
        function showSystemInfo() {
            document.getElementById('systemOverview').style.display = 'block';
            testSystemHealth();
            
            // 模拟系统运行时间
            const startTime = new Date();
            setInterval(() => {
                const uptime = Math.floor((new Date() - startTime) / 1000);
                const hours = Math.floor(uptime / 3600);
                const minutes = Math.floor((uptime % 3600) / 60);
                const seconds = uptime % 60;
                document.getElementById('uptime').textContent = `${hours}时${minutes}分${seconds}秒`;
            }, 1000);
        }
        
        // 更新系统状态显示函数
        function displayStatsResult(stats) {
            const resultDiv = document.getElementById('statsResult');
            resultDiv.innerHTML = `
                <div class="result success">
                    <h3>📊 系统状态信息</h3>
                    <p><strong>模型状态:</strong> ${stats.model_loaded ? '✅ 已加载' : '❌ 未加载'}</p>
                    <p><strong>特征数量:</strong> ${stats.feature_count}</p>
                    <p><strong>更新时间:</strong> ${new Date(stats.timestamp).toLocaleString()}</p>
                    <h4>🔍 支持的特征:</h4>
                    <div class="features-grid">
                        ${stats.features.map(feature => `
                            <div class="feature-item">
                                <div class="feature-name">${feature}</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
            
            // 更新概览信息
            document.getElementById('modelStatus').textContent = stats.model_loaded ? '✅ 已加载' : '❌ 未加载';
            document.getElementById('modelStatus').style.color = stats.model_loaded ? '#10b981' : '#ef4444';
            document.getElementById('featureCount').textContent = stats.feature_count;
        }
        
        // 页面加载完成后获取系统状态
        window.onload = function() {
            getSystemStats();
            showSystemInfo();
        };
    </script>
</body>
</html>
